import React from 'react';

export class CtrlForm extends React.Component {
  // 1 控制表单元素的显示
  state = {
    txt: 'txt',
    txt2: 'txt2',
    txt3: 'txt3',
  };

  // 表单元素值的变化
  handleTxt = (e) => {
    console.log(e.target.value);
    // 设置组件状态
    this.setState({
      txt: e.target.value,
    });
  };
  handleTxt2 = (e) => {
    console.log(e.target.value);
    // 设置组件状态
    this.setState({
      txt2: e.target.value,
    });
  };
  handleTxt3 = (e) => {
    console.log(e.target.value);
    // 设置组件状态
    this.setState({
      txt3: e.target.value,
    });
  };

  // 提交数据
  handleSubmit = () => {
    // 发起ajax请求
    console.log(this.state);
    const form = {
      name: this.state.txt,
      info: this.state.txt2,
      msg: this.state.txt3,
    };
    console.log(form);
    // .post('', data)
  };

  render() {
    // console.log('render');
    return (
      <div>
        {/* 控制表单元素的变化 */}

        <input type={'text'} value={this.state.txt} onChange={this.handleTxt} />
        <input
          type={'text'}
          value={this.state.txt2}
          onChange={this.handleTxt2}
        />
        <input
          type={'text'}
          value={this.state.txt3}
          onChange={this.handleTxt3}
        />

        <button onClick={this.handleSubmit}>提交</button>
      </div>
    );
  }
}
